<template>
	<div :class="inline ? 'flex items-center gap-1' : 'leading-[1.2em]'">
		<div>{{ $t('betting.combo', [data.length]) }}</div>
		<div class="flex items-center">
			<sports-icon class="text-t-2" v-for="(item, index) in data" :key="index" :sportId="item" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { SportsType } from '@/enums'
import { SportsIcon } from '../../sports'
defineProps({
	data: {
		type: Array<SportsType>,
		default: () => []
	},
	inline: {
		type: Boolean,
		default: false
	}
})
</script>
